import React, {
	Component
} from 'react'
import {
	Popover,
	NavBar,
	Icon
} from 'antd-mobile';
import styles from './index.scss'

const Item = Popover.Item;


class ChatList extends Component{
  constructor(props){
    super(props);
  }
  render(){
    const {dataSource}=this.props;
    return (
      <div>
        <p>{dataSource}</p>
      </div>
    )
  }
}

class RedRoom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selected: '',
      dataSource:[]
    };
  }

  onSelect = (opt) => {
    // console.log(opt.props.value);
    this.setState({
      visible: true,
      selected: opt.props.value,
    });
  };
  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };

  getInputVal(){
    this.state.dataSource.push(this.textInput.value)
    this.setState({dataSource:this.state.dataSource})
    this.textInput.value=""
    console.log(this.state.dataSource)
  }

  render() {

    let offsetX = -10; // just for pc demo
    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
      offsetX = -26;
    }
    return (<div>
      <NavBar leftContent="" mode="light" onLeftClick={() => console.log('onLeftClick')} rightContent={
        <Popover mask
          visible={this.state.visible}
          overlay={[
            (<Item key="4" value="scan" icon={<Icon type={require('../../../images/money.svg')} />} data-seed="logId">我的账户:50</Item>),
            (<Item key="5" value="special" icon={<Icon type={require('../../../images/money.svg')} />} style={{ whiteSpace: 'nowrap' }}>群成员:135</Item>),
            (<Item key="6" value="button ct" icon={<Icon type={require('../../../images/money.svg')} />}>
              <span style={{ marginRight: 5 }}>游戏说明</span>
            </Item>),
          ]}
          popupAlign={{
            overflow: { adjustY: 0, adjustX: 0 },
            offset: [offsetX, 15],
          }}
          onVisibleChange={this.handleVisibleChange}
          onSelect={this.onSelect}
        >
          <div style={{
            height: '100%',
            padding: '0 0.3rem',
            marginRight: '-0.3rem',
            display: 'flex',
            alignItems: 'center',
          }}
          >
            <Icon type="ellipsis" />
          </div>
        </Popover>
      }
      >
        大上海接龙50金币
      </NavBar>
      <div className={styles.chatContent}>
        <ChatList dataSource={this.state.dataSource} />
      </div>
      <div className={styles.footerFix}>
        <input type="text" ref={(input)=>this.textInput=input} className={styles.dialogInput} /><i className={styles.ico} onClick={this.getInputVal.bind(this)}></i>
      </div>
    </div>);
  }
}

export default RedRoom